<template>
  <view class="cartContainer">
    <!-- 无商品 -->
    <!-- <block v-if="!userInfo">
			<view class="content">
				<view class="carImg">
					<image src="../../static/empty.png" mode=""></image>
				</view>
				<view class="hint">你的购物车还是空的，快去逛逛吧</view>
				<button>去逛逛吧</button>
			</view>
			</view>
		</block> -->
    <!-- 有商品 -->
    <block>
      <!-- 购物车列表 -->
      <view class="cartList">
        <!-- 头部 -->
        <view class="editItem">
          <view class="skuitem">
            共
            <span>{{ cartList.cartTotal }}</span>
            件商品
          </view>
          <view class="edit-iconfont" @click="handleFinish" v-if="isDelete">
            <text class="iconfont icon-edit"></text>
            <view class="edit">编辑</view>
          </view>
          <view class="edit-iconfont" @click="handleFinish" v-else>
            <view class="Finish">完成</view>
          </view>
        </view>
        <!-- 购物车内容 -->
        <view
          class="carItem"
          @click="toGoodsDetail"
          v-for="carItem in cartList.list"
          :key="carItem.id"
        >
          <!-- <input class="round round-selected" :class="iSchecked" @click="handleRround"></input> -->
          <text
            class="iconfont icon-xuanzhong selected"
            :class="{ selected: !iSchecked }"
            @click="handleRround(!iSchecked, carItem.id)"
          ></text>
          <view class="carimg"
            ><image :src="carItem.goods.goods_image" mode=""></image
          ></view>
          <view class="carcontent">
            <!-- 商品名称介绍 -->
            <view class="text">{{ carItem.goods.goods_name }}</view>
            <!-- 属性标签 -->
            <view class="label">
              <!-- <view class="labelItem"><span>冰川蓝</span></view> -->
            </view>
            <!-- 商品价格及数量 -->
            <view class="price-num">
              <!-- 商品价格 -->
              <view class="price">
                <text class="unit">￥</text>
                <text class="value">{{ carItem.goods.goods_price_min }}</text>
              </view>
              <!-- 控制数量 -->
              <view class="num">
                <text
                  class="del"
                  @click="del('dec', carItem.goods_id, carItem.goods_num)"
                  >-</text
                >
                <text class="count">{{ carItem.goods_num }}</text>
                <text
                  class="add"
                  @click="del('inc', carItem.goods_id, carItem.goods_num)"
                  >+</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部结算 -->
      <view class="cartFooter">
        <text class="iconfont icon-xuanzhong selected"></text>
        <text class="allSelected">全选</text>
        <view class="right">
          <text class="totalPrice">合计:</text>
          <text class="totalPrice-1">￥</text>
          <text class="totalPrice-2">23</text>
          <text class="preOrder" v-if="isDelete"
            >结算({{ cartList.cartTotal }})</text
          >
          <text class="preOrder" v-else>删除</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  name: "Cart",
  data() {
    return {
      iSchecked: false, //是否选中商品
      userInfo: {}, //用户登录信息
      cartList: {}, //购物车数据
      isDelete: true, //删除或者结账按钮变化
      matchgood: {}, //购物车变动数据
    };
  },
  // 页面渲染之前
  beforeMount() {
    // 获取token,查看用户是否登录
    let userInfo = uni.getStorageSync("token");
    // console.log(userInfo)
    //判断是否用户是否登录
    if (userInfo) {
      this.userInfo = userInfo;
    }
    this.getCartList();
  },
  methods: {
    //购物车
    async getCartList() {
      const result = await uni.request({
        url: "https://yoshop.zyf520.xyz/index.php?s=/api/cart/list",
        header: {
          "access-token": this.userInfo,
          platform: "H5",
        },
        success: (res) => {
          // console.log(res.data.status)
          if (res.data.status === 200) {
            this.cartList = res.data.data;
          }
        },
      });
    },
    async getCartUpdate() {
      const result = await uni.request({
        url: "https://yoshop.zyf520.xyz/index.php?s=/api/cart/update",
        header: {
          "access-token": this.userInfo,
          platform: "H5",
        },
        data: {
          goodsId: this.matchgood.goods_id,
          goodsSkuId: 0,
          goodsNum: this.matchgood.goods_num,
        },
        success: (res) => {
          // console.log(res)
        },
        fail: (err) => {
          uni.showToast({
            icon: "error",
            title: err.message,
          });
        },
      });
    },
    handleFinish() {
      this.isDelete = !this.isDelete;
    },

    //点击改变数量
    del(type, goodsId, goodsNum) {
      if (type == "dec") {
        let matchgood = this.cartList.list.find((item) => {
          if (item.goods_id == goodsId) {
            if (item.goods_num > 1) {
              item.goods_num -= 1;
              return item;
            } else {
              item.goods_num = 1;
              return item;
            }
          }
        });
        this.matchgood = matchgood;
        this.getCartUpdate();
      } else if (type == "inc") {
        let matchgood = this.cartList.list.find((item) => {
          if (item.goods_id == goodsId) {
            item.goods_num += 1;
            return item;
          }
        });
        this.matchgood = matchgood;
        this.getCartUpdate();
      }
    },

    // 点击跳转详情页
    toGoodsDetail() {
      // wx.navigateTo({
      // 	url:'../goodsDetail/goodsDetail'
      // })
    },
    //点击勾选商品
    handleRround() {
      this.iSchecked = !this.iSchecked;
    },
  },
};
</script>

<style lang="stylus">
page {
  background: #f5f5f5;
}

.cartContainer, .cartList {
  position: relative;

  .editItem {
    height: 80upx;

    .skuitem {
      float: left;
      line-height: 80upx;
      margin-left: 40upx;
      font-size: 28upx;

      span {
        color: #fa2209;
      }
    }

    .edit-iconfont {
      float: right;

      .icon-edit {
        text-align: center;
        line-height: 80upx;
        float: left;
      }

      .edit {
        float: left;
        margin-left: 10upx;
        line-height: 80upx;
        margin-right: 40upx;
        font-size: 28upx;
      }

      .Finish {
        float: left;
        margin-left: 10upx;
        line-height: 80upx;
        margin-right: 40upx;
        font-size: 28upx;
        color: #DD524D;
      }
    }
  }

  .carItem {
    width: 720upx;
    height: 280upx;
    margin: 0 auto;
    border-radius: 15upx;
    background-color: #FFFFFF;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20upx;

    .iconfont {
      width: 30upx;
      height: 30upx;
      border: solid #808080 1upx;
      border-radius: 50upx;
      position: absolute;
      top: 40%;
      left: 25upx;

      &.selected {
        color: #BB2C08;
      }
    }

    .carimg {
      width: 210upx;
      height: 210upx;
      position: absolute;
      left: 80upx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .carcontent {
      width: 390upx;
      height: 210upx;
      position: absolute;
      right: 20upx;

      // background-color #4CD964
      .text {
        width: 390upx;
        height: 80upx;
        display: -webkit-box;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        // background-color #DD524D
      }

      .label {
        margin-top: 14upx;
        height: 50upx;
        color: #ababab;
        font-size: 30upx;
        overflow: hidden;

        .labelItem {
          display: inline-block;
          margin-right: 7px;
          padding: 2px 8px;
          border-radius: 6px;
          background-color: #f5f5f5;
          width: auto;
        }
      }

      .price-num {
        width: 390upx;
        height: 70upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 14upx;

        // background-color #F0AD4E
        .price {
          vertical-align: bottom;

          .unit {
            color: #fa2209;
            font-size: 24upx;
          }

          .value {
            color: #fa2209;
            font-size: 32upx;
          }
        }

        .num {
          position: absolute;
          right: 0;
          bottom: -10upx;

          .count {
            width: 80upx;
            margin: 0 8upx;
          }

          .add {
            border-radius: 0 4px 4px 0;
          }

          .del {
            border-radius: 4px 0 0 4px;
          }

          text {
            display: inline-block;
            width: 60upx;
            height: 50upx;
            text-align: center;
            line-height: 50upx;
            background-color: #C0C0C0;
            font-size: 40upx;
            font-weight: 400;
          }
        }
      }
    }
  }

  .cartFooter {
    display: flex;
    align-items: center;
    height: 96upx;
    background: #fff;
    padding: 0 15px;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    right: 0;
    z-index: 11;

    .allSelected {
      font-size: 32upx;
      font-weight: 400;
    }

    .iconfont {
      font-size: 40upx;
      margin: 0 20upx;
      color: #999;
      width: 30upx;
      height: 30upx;
      border-radius: 50%;
      border: solid #007AFF 1upx;

      &.selected {
        color: #BB2C08;
      }
    }

    .right {
      height: 96upx;
      position: absolute;
      right: 0;

      .totalPrice {
        display: inline-block;
        height: 96upx;
        line-height: 96upx;
        font-size: 32upx;
        font-weight: 400;
      }

      .totalPrice-1 {
        color: #fa2209;
        font-size: 24upx;
      }

      .totalPrice-2 {
        color: #fa2209;
        font-size: 32upx;
      }

      .preOrder {
        display: inline-block;
        background: linear-gradient(
          90deg,
          #f9211c,
          #ff6335
        );
        width: 200upx;
        height: 72upx;
        line-height: 72upx;
        text-align: center;
        font-size: 28upx;
        color: #fff;
        border-radius: 50upx;
        margin-left: 30upx;
        margin-right: 30upx;
      }
    }
  }
}
</style>
